<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0px auto;
			padding: 0px;
			list-style: none;
		}

		nav {
			height: 35px;
			background-color: #f5f5f5;
			font-size: 12px;
		}

		/* 一级菜单：相对定位 */
		.menu-level1>li {
			position: relative;
			display: inline-block;
			line-height: 35px;
			cursor: pointer;
		}

		/* 鼠标悬浮一级菜单，显示二级菜单 */
		.menu-level1>li:hover>ul {
			display: block;
		}

		/* 二级菜单绝对定位，然后隐藏 */
		.menu-level2 {
			position: absolute;
			font-size: 12px;
			width: 100px;
			text-align: left;
			display: none;
			background-color: #f5f5f5;
			
		}

		.menu-level1>li>h2 {
			font-size: 12px;
			font-weight: 400;
			width: 60px;
			padding-left: 5px;
		}

		.menu-level2>li {
			padding-left: 5px;
		}
	</style>
</head>
<body>
	<nav>
		<ul class="menu-level1">
			<li>
				<h2>我的淘宝</h2>
				<ul class="menu-level2">
					<li>已买到的宝贝</li>
					<li>我的足迹</li>
				</ul>
			</li>
			<li>
				<h2>购物车</h2>
				<ul class="menu-level2">
					<li>已买到的宝贝</li>
					<li>我的足迹</li>
				</ul>
			</li>
			<li>
				<h2>收藏夹</h2>
			</li>
			<li>
				<h2>商品分类</h2>
			</li>
		</ul>
	</nav>
</body>
</html>